<template>
  <div class="app-container">
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" @closed="operateClose" title="绑卡列表" :visible.sync="open" width="65%" append-to-body>
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="银行名称" align="center" prop="bankName" min-width="160"/>
        <el-table-column label="银行号" align="center" prop="cardNo" min-width="180"/>
        <el-table-column label="操作" fixed="right" width="180" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleNBindCard(scope.row)"
            >解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getBindCard, getYeePayWithholding, nBindCard } from '@/api/ecs/yeePayWithholding'

  export default {
    props:{
      openBindCard:{
        type:Boolean,
        default:false
      },
      id:{
        type:Number,
      },
    },
    data(){
      return{
        loading:false,
        open:false,
        dataList:[],
        detailData:{},
      }
    },

    methods:{
      operateClose() {
        this.open = false
        this.$emit("handleGetBindCardList", false)
      },
      getList(){
        this.loading = true
        getBindCard({id:this.id}).then(res=>{
          this.loading = false
          if(res.code === 200){
            if (res.data.bindCardList){
              this.dataList = JSON.parse(res.data.bindCardList)
            }
          }
        })
      },
      handleNBindCard(row){
        this.$modal.confirm('是否确认解绑公司名为"' + this.detailData.signName + '"的数据项？').then(() => {
          nBindCard({id:this.detailData.id}).then(res=>{
            if(res.code === 200){
              this.$modal.msgSuccess("提交成功");
              this.getList();
            }
          })
        }).catch(() => {});
      },
    },
    watch: {
      openBindCard: {
        handler(val) {
          this.open = val
        },
        immediate: true,
      },
      id: {
        handler(val) {
          if (val) {
            getYeePayWithholding(val).then(res=>{
              this.detailData = res.data
            })
            this.getList()
          }
        },
        immediate: true,
      }
    }
  }
</script>
<style scoped lang="scss">


</style>
